<script setup lang="ts">
import * as echarts from "echarts";
import {ref,onMounted} from "vue";
let myChart = ref('')
onMounted(()=>{
  let myEcharts = echarts.init(myChart.value);
  window.addEventListener('resize', function () {
    myEcharts.resize()
  })
  const symbolSize = 15
  let option = {
    title: {
      text: '数据总览',
      top: '20px',
      left: '30px',
      textStyle: {
        fontSize: 18,
        fontWeight: 500
      }
    },
    // 位置
    grid: {
      top: '70',
      bottom: '10%',
      right: '3%',
      left: '2%',
      containLabel: true
    },
    legend: {
      data: ['去年', '今年'],
      type: 'scroll',
      top: 10,
      right: 30,
      itemStyle: {
        color: 'rgba(255,255,255,0)',
        borderColor: 'rgba(255,255,255,0)'
      },
      // icon:"image:https://img0.baidu.com/it/u=1487799431,376049746&fm=253&fmt=auto&app=138&f=JPEG?w=870&h=473",
      lineStyle: {
        width: 1.5
      },
      textStyle: {
        color: '#ffb300',
        fontWeight: 600,
        fontSize: '14px'
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    // x轴
    xAxis: {
      show: true,
      type: 'category',
      axisTick: {
        show: false
      },
      nameTextStyle: {
        color: '#db4f4e'
      },
      axisLine: {
        lineStyle: {
          color: '#f57b00',
          width: 3
        }
      },
      axisLabel: {
        textStyle: {
          color: 'black'
        }
      },
      splitLine: {
        show: false
      },
      boundaryGap: false,
      data: ['08-01', '08-02', '08-03', '08-04', '08-05', '08-06', '08-07', '08-08', '08-09', '08-10', '08-11', '08-12', '08-13', '08-14', '08-15']
    },
    // y轴
    yAxis: {
      type: 'value',
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      nameTextStyle: {
        color: '#f57b00'
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#f57b00',
          width: 3
        }
      }
    },
    // 数据
    series: [
      {
        data: [600, 800, 600, 350, 800, 550, 800, 500, 600, 500, 500, 300, 600, 1000, 600],
        type: 'line',
        name: '去年',
        top: 0,
        smooth: true,
        symbol: 'circle',
        symbolSize: symbolSize,
        lineStyle: {
          color: 'rgba(253,205,92,0.41)'
        },
        areaStyle: {
          symbolSize: symbolSize,
          textStyle: {
            // 文字颜色
            color: '#f57b00',
            // 字体大小
            fontSize: 18,
            fontWeight: 500
          },
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: 'rgba(222,196,137,0)'
              },
              {
                offset: 0,
                color: 'rgb(255,178,0)'
              }
            ],
            global: false // 缺省为 false
          }
        },
        itemStyle: {
          color: '#ffb300',
          borderWidth: 2,
          borderColor: '#fff'
        }
      },

      {
        data: [800, 700, 1000, 200, 500, 650, 1000, 600, 500, 500, 700, 700, 600, 500, 500],
        type: 'line',
        smooth: true,
        name: '今年',
        symbol: 'circle',
        symbolSize: symbolSize,
        lineStyle: {
          color: '#ff6100'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: 'rgba(55, 102, 243,0)'
              },
              {
                offset: 0,
                color: 'rgb(225,94,13)'
              }
            ],

            global: false // 缺省为 false
          }
        },
        itemStyle: {
          color: '#ffb300',
          borderWidth: 1,
          borderColor: '#fff'
        }
      }
    ]
  }
  myEcharts.setOption(option)
})
</script>

<template>
  <div ref="myChart"
       id="essentialInformation"
       style="width: 100%; height: 260px">
  </div>
</template>

<style scoped lang="scss">
#essentialInformation{
  box-shadow: 0px 10px 16px 0px
  rgba(132, 132, 152, 0.34);
  border-radius: 10px;
  ::v-deep >div:first-child{
    width: 100%!important;
    canvas{
      width: 100%!important;
    }
  }
}
</style>
